<!-- 公共数据联级选择器 -->
<template>
  <el-select
    :loading="loading"
    @change="change"
  >
    <el-option
      v-for="item in options"
      :key="item.dictId"
      :label="item.value"
      :value="item.dictId"
    />
  </el-select>
</template>
<script>
import { dictList } from '@/api/common'

export default {
  name: 'AppDictList'
}
</script>
<script setup>

const props = defineProps({
  // 数据
  name: {
    type: String,
    default: null
  },
  type: {
    required: true,
    type: String
  },
  pid: {
    type: [String, Number],
    default: undefined
  }
})
const emit = defineEmits(['update:name'])

const change = (data) => {
  let name = ''
  if (data) {
    options.value.forEach((item) => {
      if (item.dictId === data) {
        name = item.value
      }
    })
  }
  emit('update:name', name)
}

const options = ref([])
const loading = ref(false)
const getList = async () => {
  loading.value = true
  const obj = {
    pid: props.pid,
    type: props.type
  }
  options.value = await dictList(obj).finally(() => {
    loading.value = false
  })
}

// 如果是undefined  说明是父节点直接查询
// 如果是空字符串  等待有值后请求接口
watchEffect(() => {
  if (typeof (props.pid) === 'undefined') {
    getList()
  } else if (typeof props.pid === 'number') {
    getList()
  }
})

</script>

<style scoped lang='scss'>

</style>
